<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						<image src="http://img.cpgm.cc/panda/static/invite/title8.png" mode="widthFix" />
						 <text @click="$p.navto('/pages/index/equipment')">装备奖励</text>
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<p class="title">玩自由之刃，领开箱次数，游戏达到一定的等级后，每日都能领取开箱次数</p>
			<view class="list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="left">
						<image src="http://img.cpgm.cc/panda/static/invite/box.png" mode="widthFix" />
						<view class="word">
							<p>每日领取 <text>{{item.box_num}}</text> 次开箱次数</p>
							<text>{{item.lv}}级可每日领取</text>
						</view>
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" :class="[!!item.is_rece?'opcity':'']" class="button" @click="gameBoxReward(item)">{{!!item.is_rece?'已领取':'领取'}}</u-button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#000',
				},
				list:'',
			};
		},
		onLoad(){
			this.getGmBoxList();
		},
		methods: {
			async getGmBoxList (){
				let res = await this.$http.index.getGmBoxList();
				this.list = res.data
			},

			// 领取等级奖励
			async gameBoxReward(item){
				if(!!item.is_rece) {
					this.$u.toast('已领取')
				}else {
					let phone_type = this.$u.os()
					let res = await this.$http.index.gameBoxReward({
						phone_type: phone_type,
						lv: item.lv
					})
					this.$u.toast(res.msg)
					if(res.code == 1) {
						this.getGmBoxList();
					}
				}
			},
		},
	}
</script>

<style lang="less">
.zone {
	background: #000;
	min-height: 100vh;
}
.nav-bar2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: 0px 10px;
}
	.n_left {
		width: 100%;
		display: flex;
		align-items: center;

		h3 {
			color: #fff;
			font-size: 25px;
		}
		text {
			width: 72px;
			height: 33px;
			background: linear-gradient(180deg, #FFFFFF 0%, #FF9882 100%);
			box-shadow: 0px 3px 0px 0px rgba(139,41,19,1), inset 0px -2px 0px 0px rgba(225,123,101,1);
			border-radius: 5px;
			text-align: center;
			line-height: 33px;
			position: absolute;
			right: 10px;
			color: #490E00;
			font-size: 12px;
			margin-left: 5px;
			font-weight: 600;
		}
		image {
			width: 35%;
			margin-left: 5px;
		}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

.main {
	padding: 10px;
}

.title {
	color: #fff;
	font-size: 14px;
}

.list {
	margin-top: 10px;
}

.item {
	background: #FFFFFF;
	border-radius: 5px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;

	.left {
		display: flex;
		align-items: center;

		image {
			width: 54px;
			margin-right: 10px;
		}

		.word {
			display: flex;
			flex-direction: column;

			p {
				color: #000000;
				font-size: 14px;
				font-weight: 600;
				text {
					color: #FE431A;
				}
			}
			text {
				color: #343434;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	}

	.button {
		width: 72px;
		height: 33px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}
}

.opcity {
	opacity: 0.5;
}





</style>
